<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>几个注意点</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <style>
            .demo{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <!-- 第三步：编写组件标签 -->
             <h1>{{msg}}</h1>
             <hr>
             -----------------------school--------------------------
             <school></school><hr>
             -----------------------School--------------------------
             <School></School><hr>
             -----------------------my-school--------------------------
             <my-school></my-school><hr>
             -----------------------MySchool--------------------------
             <!-- <MySchool></MySchool><hr> -->
              <br/>
             -----------------------h2--------------------------
             <h2>11111</h2><hr>
             -----------------------school自闭和标签--------------------------
             <!-- 自闭和标签也要做在脚手架环境才行，不然可能会显示混乱，比如下面写了3个school，页面上只显示了一个 -->
             <!-- <school/><hr>
             <school/><hr>
             <school/><hr> -->
             <br/>
              -----------------------school2--------------------------
             <school2>11111</school2><hr>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //阻止生产提示

            //1.创建school组件
            const s = Vue.extend({
               name:'hhhhhhhh',  //使用name配置项指定组件在开发中工具中显示的组件名称，如果没写就显示注册时的名称
               template:`
                <div>
                        <h2>学校名称：{{schoolName}}</h2>
                        <h2>学校地址：{{address}}</h2>
                </div>
               `,
               data(){
                return {
                    schoolName:'上海一中',
                    address:'上海'
                }
               }
            })

            //不使用Vue.extend
            //这种情况不会再创建组件时调用Vue.extend，但会在注册组件时帮忙调用Vue.extend
            const s2 = {
                template:`
                    <div>
                            <h2>学校名称2：{{schoolName}}</h2>
                            <h2>学校地址2：{{address}}</h2>
                    </div>
                `,
                data(){
                    return {
                        schoolName:'上海二中',
                        address:'上海'
                    }
                }
            }


            const vm =  new Vue({
                el:'#root',
                data:{
                    msg:'你好！'
                },
                //第二步：注册组件（局部注册）
                components:{
                    //组件名和创建时的组件名一致，可以简写，student:student ==> student
                    school:s,
                    School:s,
                    'my-school':s,
                    //MySchool:s, //需要脚手架才能支持，否则控制台报错
                    //h2:s //避免使用HTML元素作为组件名
                    school2:s2 //这里Vue会帮忙调用Vue.extend

                }
            })

        </script>

        
    </body>
</html>